<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons :: blog_top_head(~{::title})}">
    <title>博客详情</title>
</head>
<body>
<!--导航栏-->
<nav th:replace="~{commons :: top_nav_bar(1)}"></nav>
<!--中间内容-->
<div class="cus-padding-top-bottom-massive animate__animated animate__backInUp">
    <div class="ui container" id="blog_container">
        <!--        文章头部，显示头像，用户名，更新时间等-->
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <img th:src="@{${blog.user.avatar}}"
                         class="ui avatar image">
                    <div class="content">
                        <a href="#" class="header" th:text="${blog.user.nickname}">用户名</a>
                    </div>
                </div>
                <div class="item left middle aligned">
                    <i class="iconfont icon-B5"></i>最后更新于：<span
                        th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm:ss')}">2022-9-23</span>
                </div>
                <div class="item left middle aligned">
                    <i class="iconfont icon-B5"></i>浏览次数：<span th:text="${blog.views}">1001</span>
                </div>
            </div>
        </div>
        <!--        显示博客封面图片-->
        <div class="ui attached segment">
            <!--            封面图-->
            <img th:src="@{${blog.firstPicture}}" alt="文章封面的占位符" class="ui fluid image">
        </div>
        <!--        显示博客内容-->
        <div id="blog_content_container" class="ui padded attached segment">
            <!--            分类标志-->
            <div class="ui basic right aligned segment">
                <div class="ui basic orange label" th:text="${blog.type.name}">原创</div>
            </div>
            <!--            标题-->
            <h2 class="ui center aligned header" th:text="${blog.title}">标题</h2>
            <!--            文章主要内容-->
            <div class="typo typo-selection content cus-left-right-padding-mid"
                 th:utext="${blog.content}"
                 id="content">
            </div>
        </div>
        <!--        文章的标签-->
        <div class="ui positive bottom attached center aligned segment" th:if="${blog.appreciation}">
            <button id="give-the-thumbs-up" class="ui orange basic circular button">点赞</button>
        </div>
        <!--        点赞部分-->
        <div id="thumbs-up-msg" class="ui flowing popup transition hidden">
            点赞成功:D，谢谢支持
        </div>
        <!--        文章的标签-->
        <div class="ui positive labels message">
            <div class="ui basic teal left pointing label" th:each="tag :${blog.tagsList}" th:text="${tag.name}">
                方法论
            </div>
        </div>
        <!--        显示文章主要的信息，例如什么时候创建，更改等-->
        <div class="ui top attached positive message">
            <div class="ui middle grid">
                <div class="eleven wide column">
                    <ul class="list">
                        <li class="item">作者：<span th:text="${blog.user.nickname}"></span></li>
                        <li class="item">发表时间：<span
                                th:text="${#dates.format(blog.createTime,'yyyy-MM-dd HH:mm:ss')}"></span></li>
                        <li class="item">版权声明：<span th:text="${blog.flag}"></span></li>
                        <li class="item">转载声明：转载请注明作者和引用地址，蟹蟹٩('ω')و</li>
                    </ul>
                </div>
                <div class="five wide column">
                    <img th:src="@{/images/bird.gif}" alt="二维码占位图" class="ui right floated rounded image">
                </div>
            </div>
        </div>
        <!--        显示评论区域，可以对文章进行评论，留言-->
        <div class="ui bottom attached segment" th:if="${blog.commentable}">
            <div class="ui teal basic segment" id="comment-container">
                <div th:fragment="commentList">
                    <!--留言区域-->
                    <div class="ui threaded comments">
                        <!--        标题-->
                        <h3 class="ui dividing header">评论</h3>
                        <!--        单独评论-->
                        <div class="comment" th:each="comment : ${comments}">
                            <a class="avatar">
                                <img th:src="@{${comment.avatar}}">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <span th:text="${comment.nickname}">Joe Henderson</span>
                                    <span th:if="${comment.isAdmin}" class="ui mini basic teal left pointing label" style="padding: 1px">博主</span>
                                </a>
                                <div class="metadata">
                    <span class="date"
                          th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">5 days ago</span>
                                </div>
                                <div class="text" th:text="${comment.content}">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply" data-commentid="1"
                                       data-commentnickname="Joe Henderson"
                                       data-topCommentId="1"
                                       th:attr="data-commentid=${comment.id},
                                       data-commentnickname=${comment.nickname},
                                       data-topcommentid=${comment.topCommentId}"
                                       onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            <!--            内嵌评论-->
                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img th:src="@{${reply.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${reply.nickname}"></span>
                                            <span th:if="${reply.isAdmin}" class="ui mini basic teal left pointing label" style="padding: 1px">博主</span>
                                            <span style="color: teal" th:text="| @ ${reply.parentComment.nickname}|"></span>
                                        </a>
                                        <div class="metadata">
                    <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">5 days ago</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            Dude, this is awesome. Thanks so much
                                        </div>
                                        <div class="actions">
                                            <a class="reply"
                                               data-commentid="1"
                                               data-commentnickname="Joe Henderson"
                                               data-topCommentId="1"
                                            th:attr="data-commentid=${reply.id},
                                            data-commentnickname=${reply.nickname},
                                            data-topcommentid=${comment.id}"
                                            onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--发送评论模块-->
            <form id="comment-form" th:action="@{/comments}" method="post" class="ui reply form">
                <input type="hidden" name="blog.id" th:value="${blog.id}" >
                <input type="hidden" name="parentComment.id" value="-1" >
                <input type="hidden" name="topCommentId" value="-1" >
                <div class="field">
                    <textarea name="content" placeholder="输入一个非常有意思的评论"></textarea>
                </div>
                <div class="fields">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="iconfont icon icon-B"></i>
                            <input type="text" name="nickname" th:value="${session.user?.nickname}" placeholder="一个有意思的名称">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="iconfont icon icon-B"></i>
                            <input type="text" name="email" th:value="${session.user?.email}" placeholder="你的邮箱">
                        </div>
                    </div>
                    <div class="field">
                        <button id="comment-post-btn" type="button" class="ui teal button"><i
                                class="iconfont icon-B"></i>评论
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--浮动导航-->
<div class="ui vertical icon buttons" id="sticky_bar">
    <button id="catalogue_btn" type="button" href="#" class="ui teal button">目录</button>
    <a href="#comment-container" class="ui button">评论</a>
    <div id="scrollTo_top" class="ui icon button">↑</div>
</div>
<!--生成的目录-->
<div id="catalogue_content" style="width: 250px;" class="ui flowing popup transition hidden">
    <ol class="js-toc">
    </ol>
</div>
<!--底部内容-->
<footer th:replace="~{commons :: blog_footer_nav_bar}"></footer>
<script type="text/javascript" th:inline="javascript">
    $('#give-the-thumbs-up').popup({
        popup: $('#thumbs-up-msg'),
        on: 'click',
        position: 'top center'
    })
    $('#catalogue_btn').popup({
        popup: $('#catalogue_content'),
        on: 'click',
        position: 'left center'
    })
    //初始化自动生成目录
    tocbot.init({
        tocSelector: '#catalogue_content',
        contentSelector: '#blog_content_container',
        headingSelector: 'h1, h2, h3',
        hasInnerContainers: false,
    });

    $('#scrollTo_top').click(function () {
        $(window).scrollTo(0, 1000);
    })

    // 表单校验
    $('.ui.form').form({
        fields: {
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入回复内容'
                }]
            },
            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入回复的用户名'
                }]
            },
            email: {
                identifier: 'email',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的联系邮箱'
                }]
            }
        }
    })

    $("#comment-post-btn").click(() => {
        var form = $(".ui.form").form("validate form");
        if (form) {
            postData();
        } else {
            console.log("校验失败")
        }

    })
    postData = () => {
        $("#comment-container").load(/*[[@{/comments}]]*/"/comments", {
            "parentComment.id": $("[name='parentComment.id']").val(),
            "blog.id": $("[name='blog.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "email": $("[name='email']").val(),
            "content": $("[name='content']").val(),
            "topCommentId": $("[name='topCommentId']").val()
        }, (responseTxt, status, xhr) => {
            $(window).scrollTo($("#comment-container"), 500);
            clearContent();
        })
    }

    clearContent = () => {
        $("[name='content']").val('');
        $("[name='parentComment.id']").val(-1);
        $("[name='topCommentId']").val(null);
        $("[name='content']").attr("placeholder", "请输入评论内容").focus();
    }

    reply = (obj) => {
        var commentid = $(obj).data("commentid");
        var commentnickname = $(obj).data("commentnickname");
        var topCommentId = $(obj).data("topcommentid");
        $("[name='content']").attr("placeholder", "@" + commentnickname).focus();
        $("[name='parentComment.id']").val(commentid);
        $("[name='topCommentId']").val(topCommentId);
        $(window).scrollTo($("#comment-form"), 500);
    }

    $(function () {
        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"/comments/1");
    });
</script>
</body>
</html>